<script lang="ts">
import { defineComponent } from "vue";
import { Popup } from "vant";

import "vant/es/popup/style";

export default defineComponent({
  components: { [Popup.name]: Popup },
  props: {
    modelValue: Boolean,
    position: String,
    closeable: Boolean,
    safeAreaInsetBottom: Boolean,
    overlayStyle: Object,
  },
  emits: {
    "update:modelValue": (value: boolean) => typeof value === "boolean",
  },
  setup(props, ctx) {
    return { closePopup: () => ctx.emit("update:modelValue", false) };
  },
});
</script>

<template>
  <van-popup
    class="popup-comp"
    :show="modelValue"
    :position="position"
    :closeable="closeable"
    round
    :safe-area-inset-bottom="safeAreaInsetBottom"
    :overlayStyle="overlayStyle"
    teleport="body"
    @click-overlay="closePopup"
    @click-close-icon="closePopup"
  >
    <slot />
  </van-popup>
</template>

<style lang="less">
:root {
  --van-popup-round-radius: 10px;
}
</style>
